<template>
  <div style="padding: 32px">
    <h2 style="margin-bottom: 24px">虚拟列表演示</h2>
    <VirtualListComp
      :list="rows"
      :columns="columns"
      :item-height="38"
      :col-width="120"
      :width="880"
      :height="350"
      :buffer="6"
      :col-buffer="2"
    >
      <template #cell="{ item, col, rowIndex, colIndex }">
        <span style="color: #555">
          <div
            style="
              padding: 8px 16px;
              border-bottom: 1px solid #eee;
              background: #fff;
              margin-bottom: 2px;
              line-height: 1.7;
              font-size: 14px;
              word-break: break-all;
            "
            v-html="`<b style='color:#3a8ee6'>${rowIndex + 1}</b>：${item.name}`"
          />
          <span style="color: #bbb; font-size: 11px"
            >({{ rowIndex }},{{ colIndex }})</span
          >
        </span>
      </template>
    </VirtualListComp>
  </div>
</template>

<script setup>
import { ref } from "vue";
import VirtualListComp from "./VirtualListComp.vue";

const columns = Array.from({ length: 60 }, (_, i) => ({
  key: "col" + i,
  title: `列${i + 1}`,
}));

const rows = ref(
  Array.from({ length: 200 }, (_, i) => {
    // 每行生成 1~6 个段落，拼接成 name 字段，内容换行用 <br>
    const lineNum = Math.floor(Math.random() * 6) + 1;
    const name = Array.from(
      { length: lineNum },
      (__, j) => `第${i + 1}行 - 第${j + 1}段落，内容随机……`
    ).join("<br>");
    return { name };
  })
);
</script>
